<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .edit_container {
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }
        #editor{
             height:100px;
         }
    </style>
</head>
<body>
    <link href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.css" rel="stylesheet">

<!-- 创建容器 -->
<div id="editor">
  <!-- <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p> -->
</div>
<button id="submit">提交</button>
<button id="hx">回显</button>
<!-- 引入Quill -->
<script src="https://cdn.staticfile.org/quill/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],
  ['link', 'image'],

//   [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
//   [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
//   [{ 'direction': 'rtl' }],                         // text direction

//   [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
//   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

//   [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
//   [{ 'font': [] }],
//   [{ 'align': [] }],

//   ['clean']                                         // remove formatting button
];
var quill = new Quill('#editor', {
    theme: 'snow',
  modules: {
    toolbar: toolbarOptions
  }
});
//   var quill = new Quill('#editor', {
//     theme: 'snow'
//   });


document.getElementById('submit').onclick = function(){
    console.log(document.querySelector('#editor').children[0].innerHTML)
}

document.getElementById('hx').onclick = function(){
    const content = document.querySelector('#editor').children[0].innerHTML
    quill.pasteHTML(content + '<a href="http://www.baidu.com">回显</a>')
}


</script>
</body>
</html>